<template>
  <div class="holiday-history" v-loading="loading">
    <el-table :data="dataSource" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="owner" label="请休假人员" min-width="80" />
      <el-table-column prop="type" label="请休假类型" min-width="80" />
      <el-table-column prop="leave_num" label="请休假天数" min-width="80" />
      <el-table-column prop="sp_status" label="状态" min-width="80" >
        <template slot-scope="{ row }">
          <el-tag size="small"  :type="tagStatus[row.sp_status]">{{row.sp_status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="申请时间" min-width="80" >
        <template slot-scope="{ row }">
          {{parseTime(row.create_time, '{y}-{m}-{d} {h}:{i}')}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-dropdown trigger="click" size="small">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="$emit('onShowMonitor', scope.row)"
                >流程监控</el-dropdown-item>
                <el-dropdown-item
                  style="color: red"
                  @click.native="showDeleteConfirm(scope.$index, scope.row)"

                >删除</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { parseTime, previewFileAppendPath } from "@/utils/index.js";
export default {
  name: "HolidayHistory",
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean
    }
  },
  data() {
    return {
      tagStatus: {
        '审批中': 'primary',
        '同意': 'success',
        '不同意': 'danger'
      }
    }
  },
  methods: {
    parseTime,
    previewFileAppendPath,
    // 显示删除确认框
    showDeleteConfirm(index, row) {
      this.$confirm("确认删除此记录吗？").then((res) => {
        this.$emit('onDeleteHoliday', index, row)
      });
    }
  },
};
</script>

<style lang="scss">
.holiday-history {
  padding: 12px;
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>